{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="demoTab">
            <ul class="layui-tab-title">
                <li class="layui-this" style="font-size:15px;"><strong>工资</strong></li>
                <li style="font-size:15px;"><strong>社保</strong></li>
                <li style="font-size:15px;"><strong>公积金</strong></li>
            </ul>
            <div class="layui-tab-content" style="padding:0">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form gg-form-bar border-x border-t" lay-filter="barsearchform">
                        <div class="layui-input-inline" style="width:300px;">
                            <input type="text" class="layui-input" id="diff_time" placeholder="接收日期范围" readonly
                                   name="diff_time">
                        </div>
                        <div class="layui-input-inline" style="width:136px">
                            <select name="type">
                                <option value="">选择类型</option>
                                <option value="1">日报</option>
                                <option value="2">周报</option>
                                <option value="3">月报</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width:150px;">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i
                                    class="layui-icon layui-icon-search mr-1"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
                        </div>
                    </form>
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
                <div class="layui-tab-item">
                    <form class="layui-form gg-form-bar border-x border-t" lay-filter="barsearchform1">
                        <div class="layui-input-inline" style="width:300px;">
                            <input type="text" class="layui-input" id="diff_time1" placeholder="接收日期范围" readonly
                                   name="diff_time1">
                        </div>
                        <div class="layui-input-inline" style="width:136px">
                            <select name="read">
                                <option value="">选择状态</option>
                                <option value="1">未读</option>
                                <option value="2">已读</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width:136px">
                            <select name="type">
                                <option value="">选择类型</option>
                                <option value="1">日报</option>
                                <option value="2">周报</option>
                                <option value="3">月报</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width:150px;">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform1"><i
                                    class="layui-icon layui-icon-search mr-1"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
                        </div>
                    </form>
                    <table class="layui-hide" id="test1" lay-filter="test1"></table>
                </div>

                <div class="layui-tab-item">
                    <form class="layui-form gg-form-bar border-x border-t" lay-filter="barsearchform2">
                        <div class="layui-input-inline" style="width:300px;">
                            <input type="text" class="layui-input" id="diff_time2" placeholder="接收日期范围" readonly
                                   name="diff_time2">
                        </div>
                        <div class="layui-input-inline" style="width:136px">
                            <select name="read">
                                <option value="">选择状态</option>
                                <option value="1">未读</option>
                                <option value="2">已读</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width:136px">
                            <select name="type">
                                <option value="">选择类型</option>
                                <option value="1">日报</option>
                                <option value="2">周报</option>
                                <option value="3">月报</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width:150px;">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform2"><i
                                    class="layui-icon layui-icon-search mr-1"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
                        </div>
                    </form>
                    <table class="layui-hide" id="test2" lay-filter="test2"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe61f;</i>新建汇报</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">查看</button>
        <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </div>
</script>
<script type="text/html" id="barDemo1">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">查看</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </div>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool', 'employeepicker', 'laydatePlus'];

    function gouguInit() {
        var form = layui.form, table = layui.table, tool = layui.tool, laydatePlus = layui.laydatePlus;

        //日期范围
        var diff_time = new laydatePlus({'target': 'diff_time'});

        layui.pageTable = table.render({
            elem: '#test',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', {title: '导出EXCEL', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-export'}],
            title: '工作汇报列表',
            url: "/oa/work/index", //数据接口
            where: {'send': 1},
            page: true,//开启分页
            limit: 20,
            cellMinWidth: 80, //全局定义常规单元格的最小宽度
            cols: [[ //表头
                {field: 'id', title: '序号', width: 80, align: 'center'},
                {field: 'type_title', title: '汇报类型', width: 88, align: 'center'},
                {field: 'person_name', title: '接收人', width: 240},
                {field: 'works', title: '工作内容'},
                {field: 'create_time', title: '汇报时间', align: 'center', width: 160},
                {field: 'files', title: '附件(个)', align: 'center', width: 80},
                {field: 'right', title: '操作', fixed: 'right', toolbar: '#barDemo', width: 132, align: 'center'}
            ]],
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                tool.side('/oa/work/add?id=' + data.id);
                return;
            }
            if (obj.event === 'del') {
                layer.confirm('确定要删除该汇报吗?', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: "/oa/work/delete",
                        type: 'post',
                        data: {id: data.id},
                        success: function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) {
                                obj.del();
                            }
                        }
                    })
                    layer.close(index);
                });
            }
            if (obj.event === 'view') {
                tool.side('/oa/work/read?id=' + data.id);
                return;
            }
        });

        //表头工具栏事件
        table.on('toolbar(test)', function (obj) {
            if (obj.event === 'add') {
                addNew();
                return;
            }
            if (obj.event === 'LAYTABLE_EXCEL') {
                var formSelect = form.val('barsearchform');
                formSelect.limit = 99999;
                formSelect.send = 1;
                $.ajax({
                    url: '/oa/work/index',
                    data: formSelect,
                    success: function (res) {
                        table.exportFile('test', res.data, 'xls');
                    }
                });
                return;
            }
        });

        //监听搜索提交
        form.on('submit(webform)', function (data) {
            let f = data.field;
            layui.pageTable.reload({
                where: {send: 1, diff_time: f.diff_time, type: f.type, read: f.read},
                page: {curr: 1}
            });
            return false;
        });


        //日期范围
        var diff_time1 = new laydatePlus({'target': 'diff_time1'});

        layui.pageTable1 = table.render({
            elem: '#test1',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', {title: '导出EXCEL', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-export'}],
            title: '工作汇报列表',
            url: "/oa/work/index", //数据接口
            where: {'send': 0},
            page: true,//开启分页
            limit: 20,
            cellMinWidth: 80, //全局定义常规单元格的最小宽度
            cols: [[ //表头
                {field: 'id', title: '序号', width: 80, align: 'center'},
                {field: 'type_title', title: '汇报类型', width: 88, align: 'center'},
                {field: 'from_name', title: '汇报人', width: 100, align: 'center'},
                {field: 'works', title: '工作内容'},
                {field: 'send_time', title: '汇报时间', align: 'center', width: 160},
                {
                    field: 'read_time', title: '是否已读', align: 'center', width: 86, templet: function (d) {
                        var html = '<span style="color:#5FB878">已读</span>';
                        if (d.read_time == 0) {
                            html = '<span style="color:#FF5722">未读</span>';
                        }
                        return html;
                    }
                },
                {field: 'files', title: '附件(个)', align: 'center', width: 86},
                {field: 'right', title: '操作', fixed: 'right', toolbar: '#barDemo1', width: 100, align: 'center'}
            ]]
        });

        //监听行工具事件
        table.on('tool(test1)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定要删除该汇报吗?', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: "/oa/work/delete",
                        type: 'post',
                        data: {id: data.wid},
                        success: function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) {
                                obj.del();
                            }
                        }
                    })
                    layer.close(index);
                });
            }
            if (obj.event === 'view') {
                tool.side('/oa/work/read?id=' + data.wid, '900px');
                return;
            }
        });

        //监听搜索提交
        form.on('submit(webform1)', function (data) {
            let f = data.field;
            layui.pageTable1.reload({
                where: {send: 0, diff_time1: f.diff_time1, type: f.type, read: f.read},
                page: {curr: 1}
            });
            return false;
        });


        //表头工具栏事件
        table.on('toolbar(test1)', function (obj) {
            if (obj.event === 'add') {
                addNew();
                return;
            }
            if (obj.event === 'LAYTABLE_EXCEL') {
                var formSelect = form.val('barsearchform1');
                formSelect.limit = 99999;
                formSelect.send = 0;
                $.ajax({
                    url: '/oa/work/index',
                    data: formSelect,
                    success: function (res) {
                        table.exportFile('test1', res.data, 'xls');
                    }
                });
                return;
            }
        });


        //日期范围
        var diff_time2 = new laydatePlus({'target': 'diff_time2'});

        layui.pageTable2 = table.render({
            elem: '#test2',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', {title: '导出EXCEL', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-export'}],
            title: '工作汇报列表',
            url: "/oa/work/index", //数据接口
            where: {'send': 0},
            page: true,//开启分页
            limit: 20,
            cellMinWidth: 80, //全局定义常规单元格的最小宽度
            cols: [[ //表头
                {field: 'id', title: '序号', width: 80, align: 'center'},
                {field: 'type_title', title: '汇报类型', width: 88, align: 'center'},
                // {field: 'from_name', title: '汇报人', width: 100, align: 'center'},
                {field: 'works', title: '工作内容'},
                {field: 'send_time', title: '汇报时间', align: 'center', width: 160},
                {
                    field: 'read_time', title: '是否已读', align: 'center', width: 86, templet: function (d) {
                        var html = '<span style="color:#5FB878">已读</span>';
                        if (d.read_time == 0) {
                            html = '<span style="color:#FF5722">未读</span>';
                        }
                        return html;
                    }
                },
                {field: 'files', title: '附件(个)', align: 'center', width: 86},
                {field: 'right', title: '操作', fixed: 'right', toolbar: '#barDemo1', width: 100, align: 'center'}
            ]]
        });

        //监听行工具事件
        table.on('tool(test2)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定要删除该汇报吗?', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: "/oa/work/delete",
                        type: 'post',
                        data: {id: data.wid},
                        success: function (e) {
                            layer.msg(e.msg);
                            if (e.code == 0) {
                                obj.del();
                            }
                        }
                    })
                    layer.close(index);
                });
            }
            if (obj.event === 'view') {
                tool.side('/oa/work/read?id=' + data.wid, '900px');
                return;
            }
        });

        //监听搜索提交
        form.on('submit(webform2)', function (data) {
            let f = data.field;
            layui.pageTable1.reload({
                where: {send: 0, diff_time2: f.diff_time2, type: f.type, read: f.read},
                page: {curr: 1}
            });
            return false;
        });


        //表头工具栏事件
        table.on('toolbar(test2)', function (obj) {
            if (obj.event === 'add') {
                addNew();
                return;
            }
            if (obj.event === 'LAYTABLE_EXCEL') {
                var formSelect = form.val('barsearchform2');
                formSelect.limit = 99999;
                formSelect.send = 0;
                $.ajax({
                    url: '/oa/work/index',
                    data: formSelect,
                    success: function (res) {
                        table.exportFile('test2', res.data, 'xls');
                    }
                });
                return;
            }
        });

        function addNew() {
            var type = [{'id': 1, 'title': '日报'}, {'id': 2, 'title': '周报'}, {'id': 3, 'title': '月报'}];
            layer.open({
                title: '选择汇报类型',
                type: 1,
                area: ['360px', '300px'],
                content: '<div style="width:325px; padding:15px 15px 0"><div id="selectCoursr"></div></div>',
                success: function () {
                    tableid = table.render({
                        elem: '#selectCoursr',
                        cols: [[ //标题栏
                            {type: 'radio', title: '选择'},
                            {field: 'title', title: '汇报类型'}
                        ]],
                        data: type
                    });
                },
                btn: ['确定'],
                yes: function (idx) {
                    var checkStatus = table.checkStatus(tableid.config.id);
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        tool.side('/oa/work/add?type=' + data[0].id);
                        layer.close(idx);
                    } else {
                        layer.msg('请选择汇报类型');
                        return false;
                    }
                }
            })
        }
    }
</script>
{/block}
<!-- /脚本 -->